<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构模块 -->
      <!-- 头部 -->
      <el-card v-loading="loading" class="tree-card">
        <treeNode
          :departs="head"
          :head-obj="['添加子部门']"
          style="height: 40px"
          @addSection="addSection"
        />

        <!-- 树结构  default-expand-all 是否展开所有树结构-->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- slot-scope 接收当前 插槽节点的数据 data  :departs 将此节点的数据传给子节点-->
          <treeNode
            slot-scope="{ data }"
            :departs="data"
            :head-obj="operateObj"
            style="width: 100%"
            @delDepls="getTissueListApi"
            @addSection="addSection"
            @compile="compileFn"
          />
        </el-tree>
      </el-card>
      <Addtree
        ref="edit"
        :dialog-visible.sync="isDialog"
        :tree-node="node"
        @addNode="getTissueListApi"
      />
    </div>
  </div>
</template>

<script>
import { getTissueListApi } from '@/api'
import treeNode from './components/tree-tools.vue'
import { getDepartments } from '@/utils'
import Addtree from './components/add-tree.vue'
export default {
  components: {
    treeNode,
    Addtree
  },
  data() {
    return {
      head: {}, // 头部数据
      departs: [], // 树形结构数据
      operateObj: ['添加子部门', '编辑部门', '删除部门'], // 左侧操作项数据
      // 结构规则 默认label为1级 children为二级
      defaultProps: {
        label: 'name', // 值为从list中寻找的值
        children: 'children'
      },
      isDialog: false, // 弹出框状态
      node: {}, // 添加部门框所在节点数据
      loading: false // 加载状态
    }
  },
  created() {
    this.getTissueListApi()
  },
  methods: {
    // 获取组织架构数据，并处理
    async getTissueListApi() {
      this.loading = true
      const result = await getTissueListApi()
      // 头部数据
      this.head = { name: result.companyName, manager: '负责人', id: '' }
      // 调用封装的树形数据处理函数
      this.departs = getDepartments(result.depts, '')
      this.loading = false
    },

    // tree-toolsd组件点击 -> 新增 -> 触发
    addSection(node) {
      // 弹出添加部门拟态框
      this.isDialog = !this.isDialog
      // 将当前点击的节点数据存储
      this.node = node
    },

    // tree-toolsd组件点击 -> 编辑 -> 触发
    compileFn(node) {
      this.isDialog = !this.isDialog
      // 将当前点击的节点数据存储
      this.node = node
      // 获取子组件实例 调取子组件方法
      this.$refs.edit.getSectionInfo(node.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
